<template>
  <div class= "auto">
    <tools-page :need-back='false' title="安检"></tools-page>
    <route :comp="{name: 'void-page'}" name="checker-router"></route>
    <footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid" style="align:center">
      <table width="100%" height="30px" align="center" style="text-align:center">
        <tr>
          <td @click="go2('phone-state', 'inspect'), index = 1" class="text-center" :class="{'nav-actived': index === 1}">
            <table>
              <tr>
                <th class="text-center"><span class="glyphicon glyphicon-user"></span></th>
              </tr>
              <tr>
                <th class="text-center">安检员状态</th>
              </tr>
            </table>
          </td>
          <!-- <td @click="this.showModal = true">安检计划<td> -->
          <td @click="$goto('lcheck-plan'), index = 2" class="text-center" :class="{'nav-actived': index === 2}">
            <table>
              <tr>
                <th class="text-center"><span class="glyphicon glyphicon-list-alt"></span></th>
              </tr>
              <tr>
                <th class="text-center">安检计划</th>
              </tr>
            </table>
          </td>
          <td @click="go2('system-setting'), index = 3" class="text-center" :class="{'nav-actived': index === 3}">
            <table>
              <tr>
                <th class="text-center"><span class="glyphicon glyphicon-cog"></span></th>
              </tr>
              <tr>
                <th class="text-center">系统设置</th>
              </tr>
            </table>
          </td>
          <td @click="go2('check-notice'), index = 4" class="text-center" :class="{'nav-actived': index === 4}">
            <table>
              <tr>
                <th class="text-center"><span class="glyphicon glyphicon-bell"></span></th>
              </tr>
              <tr>
                <th class="text-center">通知公告</th>
              </tr>
            </table>
          </td>
          <td @click="go2('phone-book'), index = 5" class="text-center" :class="{'nav-actived': index === 5}">
            <table>
              <tr>
                <th class="text-center"><span class="glyphicon glyphicon-earphone"></span></th>
              </tr>
              <tr>
                <th class="text-center">通讯录</th>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    </footer>
    <menu :show.sync="showModal" small>
      <div slot="modal-body" class="modal-body">
        <table align="center">
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('check-plan')">安检计划-月度导航</td></tr>
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('area-plan')">安检计划-小区导航</td></tr>
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('prearranged-plan')">安检计划-到期预约</td></tr>
          <tr><td>&nbsp;</td></tr>
        </table>
        <!-- <table width="100%">
          <tr>
            <td><img src="../../../static/singleleft.png" width="32" height="32" @click="ready()"></img></td>
            <td style="text-align:center"><label>安检计划</label></td>
            <td></td>
          </tr>
          <tr style="text-align:center">
            <td @click="this.showModal = false, go2('check-plan')"><label>月度导航</label></td>
            <td @click="this.showModal = false, go2('area-plan')"><label>小区导航</label></td>
            <td @click="this.showModal = false, go2('prearranged-plan')"><label>到期预约</label></td>
          </tr>
        </table> -->
      </div>
    <menu>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  title: '安检员界面',
  data() {
    return {
      orgs : Vue.orgs,
      showModal: false,
      show: true,
      index: 1
    }
  },
  computed: {
    orgCrumb: function() {
      let oc = []
      if(this.orgs) {
        this.orgs.filter((item) => {
          return item.level != 5
        }).forEach(function(org) {
            oc.push(org.name)
        })
      }
      return oc.join('--')
    }
  },
  ready() {
    // this.show= true
    this.go2('phone-state', 'inspect')
  },
  methods: {
    go2: function(widget, param) {
      this.$goto(widget, {role: param}, 'checker-router')
      this.show= false
    },
    mute: function() {
      HostApp.mute()
    }
  }
}
</script>
<style scoped>
  .nav-actived {
    color: #67BA2F;
    text-align: center;
  }
</style>
